<template>
    <div>
        <div class="box3-title">偿债风险</div>
        <div class="line-group">
            <van-row gutter="4">
                <van-col span="8">
                    <div class="line-box" :class="grade === 0 ? 'line-1': ''"></div>
                    <span class="line-text" :class="grade === 0 ? 'line-text-1': ''">高风险</span>
                </van-col>
                <van-col span="8">
                    <div class="line-box" :class="grade === 1 ? 'line-2': ''"></div>
                    <span class="line-text" :class="grade === 1 ? 'line-text-2': ''">中风险</span>
                </van-col>
                <van-col span="8">
                    <div class="line-box" :class="grade === 2 ? 'line-3': ''"></div>
                    <span class="line-text" :class="grade === 2 ? 'line-text-3': ''">无风险</span>
                </van-col>
            </van-row>
        </div>

        <div class="tag-group">
            <span class="tag-box-1 tag-1"></span>
            <div class="tag-group-text">准货币资金与有息负债差额</div>
            <span class="tag-box-2 tag-2 tag-r"></span>
            <div class="tag-group-text">资产负债率</div>
        </div>

        <div class="box3-item">
            <div id="Chart2" :style="{width: '100%', height: '300px'}"></div>


            <table border="1" bordercolor="#E6E7E8">
                <tr>
                    <th></th>
                    <th v-for="item in chartData">{{ item.year }}年报</th>
                </tr>
                <tr>
                    <td>
                        <span class="tar-box-1 tar-1"></span>
                    </td>
                    <td v-for="item in chartData">{{ item.diff | priceTo }}亿</td>
                </tr>
                <tr>
                    <td>
                        <span class="tar-box-2 tar-2"></span>
                    </td>
                    <td v-for="item in chartData" :class="(item.propertyDebtRatio * 100) > 0 ?  'up': 'down'">{{ item.propertyDebtRatio | Scale }}%</td>
                </tr>
            </table>

            <div class="box3-group-label">
                <p>推荐标准：</p>
                <p>资产负债率 < 60%</p>
                <p>准货币资金与有息负债的差额 > 0</p>
            </div>
        </div>
    </div>
</template>

<script>

    import {debtRisk} from "../../api/index";

    export default {
        name: "echart2",
        data(){
            return {
                chartData: [],
                grade: ''   //风险等级
            }
        },
        filters: {
            priceTo(val){
                return (val / 10000).toFixed(2)
            },
            Scale(val){
                return (val * 100).toFixed(2)
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            async init(){
                let tscode = this.$route.query.tscode;

                await debtRisk(tscode).then(res=>{
                    this.chartData = res;
                    this.grade = res[res.length-1].risk;

                    let year = [];
                    let diffArr = [];
                    let propertyDebtRatioArr = [];

                    if(res && res.length != 0){
                        res.forEach(item=>{
                            year.push(item.year);
                            diffArr.push(parseFloat((item.diff / 10000).toFixed(2)));
                            propertyDebtRatioArr.push(parseFloat((item.propertyDebtRatio  * 100).toFixed(2)));
                        })
                    };


                    let option = {
                        height: '210px',
                        color: '#6467F0',
                        grid: {
                            y: '50'
                        },
                        tooltip: {},
                        /*legend: {
                            data: [
                                {
                                    name: '准货币资金与有息负债差额',
                                    icon:'image:///static/1.png',
                                    textStyle: {
                                        color: '#333'
                                    }
                                },
                                {
                                    name: '资产负债率',
                                    icon:'image:///static/2.png',
                                    textStyle: {
                                        color: '#333'
                                    }
                                }
                            ],
                            left: '0',
                            top: '0',
                        },*/
                        xAxis: {
                            data: year
                        },
                        yAxis: [
                            {
                                name: '资产负债率',
                                type: 'value',
                                nameTextStyle: {
                                    padding: [0, 0, 0, 0]    // 四个数字分别为上右下左与原位置距离
                                },
                                position: 'left',
                                axisLabel: {
                                    formatter: '{value}'
                                },
                                axisLine:{
                                    show: false,
                                    lineStyle: {
                                        color: '#999999'
                                    }
                                }
                            },
                            {
                                name: '准货币资金与有息负债差额(亿)',
                                type: 'value',
                                nameTextStyle: {
                                    padding: [0, 0, 0, -98]    // 四个数字分别为上右下左与原位置距离
                                },
                                position: 'right',
                                axisLabel: {
                                    formatter: '{value}%'
                                },
                                axisLine:{
                                    show: false,
                                    lineStyle: {
                                        color: '#999999'
                                    }
                                },
                                splitLine: false
                            }
                        ],
                        series: [
                            {
                                name: '准货币资金与有息负债差额',
                                type: 'bar',
                                data: diffArr,
                                barWidth: '20px'
                            },
                            {
                                name: '资产负债率',
                                data: propertyDebtRatioArr,
                                type: 'line',
                                yAxisIndex: 1,
                                itemStyle: {
                                    color: '#FA5151'
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#FA5151'
                                    }
                                },
                                areaStyle: {
                                    color: '#FA5151',
                                    opacity: 0.1
                                }
                            },

                        ]
                    };
                    let Chart2 = this.$echarts.init(document.getElementById('Chart2'));
                    Chart2.setOption(option);
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .box3 {
        position: relative;
        margin-top: 10px;
        text-align: center;
        width: calc(100% - 20px);
        height: auto;
        padding: 0 10px 0 10px;
        background: #FFFFFF;
        border-radius: 6px;

        .box3-item {
            position: relative;
        }

        .box3-title {
            font-size: 18px;
            font-weight: 500;
            color: #333333;
            text-align: left;
            padding-bottom: 24px;
            padding-top: 24px;
        }

        .line-group {
            width: 80vw;
            margin: 0 auto 32px auto;
            font-size: 16px;
            color: #999999;

            .line-box {
                width: 100%;
                height: 10px;
                background: #EEF4FF;
            }

            .line-1 {
                background-color: #FA5151;
            }

            .line-2 {
                background-color: #FFC509;
            }

            .line-3 {
                background-color: #16DE98;
            }

            .line-text {
                position: relative;
                top: 9px;
            }

            .line-text-1 {
                color: #FA5151;
            }

            .line-text-2 {
                color: #FFC509;
            }

            .line-text-3 {
                color: #16DE98;
            }


        }

        .box3-group-label {
            margin-top: 18px;
            padding: 8px 10px;
            text-align: left;
            zoom: 0.9;
            font-size: 10px;
            line-height: 15px;
            color: #999999;
            background: #F9FBFF;
        }

        .collect {
            display: flex;
            flex-direction: column;

            .collect-text {
                text-align: left;
                font-size: 12px;
                font-weight: 400;
                color: #333333;
            }

            .collect-price {
                margin-top: 8px;
                text-align: left;
                font-size: 30px;
                font-weight: bold;
                color: #333333;
            }

            .compete {
                text-align: right;
                position: relative;
                top: 11px;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                font-size: 14px;
                font-weight: 500;

                .compete-you {
                    position: relative;
                    top: 5px;
                    color: #05AD80;
                    margin-left: 1px;
                }

                .compete-ruo {
                    position: relative;
                    top: 0;
                    color: #E62C3B;
                    margin-left: 2px;
                }
            }


        }

        .product {

            .product-title {
                padding-top: 24px;
                font-size: 18px;
                font-weight: 500;
                color: #333333;
                text-align: left;
            }

            .product-fenxian {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                justify-content: center;
                align-content: center;
                color: #666666;
                font-size: 14px;
                font-weight: 500;
                padding-top: 14px;
                padding: 14px 32px 0 32px;

                .product-fenxian-title {
                    margin-bottom: 9px;
                }

                .product-fenxian-text {
                    margin-top: 7px;
                    font-size: 16px;
                }
            }
        }
    }

    table{
        margin-top: 16px;
        width: 100%;
        font-size: 12px;
        font-weight: 500;
        zoom: 0.95;

        th,td{
            height: 30px;
            line-height: 30px;
        }
    }

</style>
